<template>
    <div>
        <van-nav-bar 
        @click-left="onClickLeft"
       >
            <van-icon name="arrow-left" slot="left" color='black' size='28px'/>
        </van-nav-bar>
        <div class='shadow'></div>
        <div class='sp'>

        </div>
        <van-row class='van'>
            <van-col span="8" offset="1">视频标题</van-col>
        </van-row>
        <van-row class='van'>
            <van-col span="23" offset="1">视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题视频标题</van-col>
        </van-row>
        <div class='shadow1'></div>
         <van-row class='van1'>
            <van-col span="16" offset="1">喜欢就分享给朋友吧！</van-col>
        </van-row>
        <van-row class='van2'>
            <van-col span="16" offset="1"><share :config="config" class='van3'></share></van-col>
        </van-row>
        <div class='shadow1'></div>
        <div class='bottom'>
            <van-row>
                <van-col span="3" offset="1"><input type="text" placeholder="发表评论..." class='ipt'></van-col>
                <van-col span="4" offset="10"><span class="sp4"><van-icon name="comment-o" slot="left" color='black' size='20px'/></span>5</span></van-col>
                <van-col span="4" offset="1"><span class="sp4"><van-icon 
                name="thumb-circle-o" slot="left" color='black' size='20px'/></span>200</span></van-col>
            </van-row>
        </div>
          
    </div>
</template>

<script>
export default {
    name:'Spdetail',
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        }
    },
    data () {
        return {
            config:{
                url: 'http://www.baidu.com', // 网址，默认使用 window.location.href
                source:'', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
                title: 'hello', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                description: 'hi', // 描述, 默认读取head标签<meta name="description" content="PHP弱类型的实现原理分析" />
                image : '', // 图片, 默认取网页中第一个img标签
                sites: ['wechat','douban','weibo','qq' ,'qq'], // 启用的站点
                disabled: [''], // 禁用的站点
                wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
                wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
            },
        }
    }
}
</script>

<style scoped>
.sp{
    width: auto;
    height: 190px;
    background: red;
}
.shadow{
    width: auto;
    height: 2px;
    background:silver;
    margin-top:10px;
    margin-bottom:10px;
}
.shadow1{
    width: auto;
    height: 10px;
    background:silver;
    margin-top:20px;
    margin-bottom:10px;
}
.shadow2{
    width: auto;
    height: 2px;
    background:silver;
    margin-top:40px;
    margin-bottom:10px;
}
.van{
    margin-top: 20px;
    font-size: 18px;
}
.van1{
    margin-top: 20px;
    font-size: 16px;
    color:#BBB;
}
.van2{
    margin-top: 20px;
}
.bottom{
    width: 375px;
    height: 50px;
    position: fixed;
    left:0px;
    top:760px;
    text-align: center;
    line-height: 50px;
    border-top:1px solid silver;
    background: white;
}
.bottom .ipt{
    border-radius:8px;
    height: 30px;
    width: 200px;
    margin-right: 10px
}
</style>